<template>
  <div class="main">
    
     <div class="header-container">
          <div class="header">
            <img src="@/assets/title3.png"/>
            <el-input
            autocapitalize="off" 
            autocorrect="off"
             autocomplete="off"
              :spellcheck="false"
                placeholder="搜索你感兴趣的话题或爱好"
                @focus="handleSearch"
                class="search"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <van-tabs v-model="active" :ellipsis="false">
            <van-tab :title="obj.name" v-for="obj in channels" :key="obj.id">
              <!-- 文章列表 -->
              <keep-alive>
                <ArticleList :article="obj"></ArticleList>
              </keep-alive>
            </van-tab>
            <!-- 汉堡按钮定位吧列表最后的位置给挡住了，解决方法就是在这里通过插槽，添加一个占位元素 -->
            <div slot="nav-right" class="wap-nav-placeholder"></div>
            <!-- 汉堡按钮 -->
            <div slot="nav-right" class="wap-nav-wrap" @click="gotoDy">
              <van-icon name="wap-nav" size="30"/>
            </div>
          </van-tabs>
       </div>
    <div class="publish" @click="gotoPublish()">
      <img src="@/assets/publish.png"/>
    </div>
  </div>
</template>
<script>
import {Toast} from "vant";
import ArticleList from "./components/articleList";
import {mapState} from "vuex";
import {channelList} from "@/api/share.js";
import {userSearchApi} from "../../api/share";

export default {
  name: "Follow",
  components: {
    ArticleList,
  },
  data() {
    return {
      channels: [],
      active: 1,
      contentList: [],
      token: "",
      timeTest: "20231011 19:06",
      refreshLoading:false
    };
  },
  watch: {
    token: {
      handler(newVal, oldVal) {
        // this.$toast(newVal)
        this.one = newVal
        this.getChannelList()
      }
    }
  },
  mounted() {
  },
  beforeMount() {
    //1、接收flutter传递的token
    // window["getInfoFromFlutter"] = (info) => {
    //   // this.$toast(info)
    //   // this.$toast('1111111111')
    //   this.getInfoFromFlutter(info);
    // };
    this.getChannelList();
  },
  computed: {
    // ...mapState("share", ["channels"]),
  },
  methods: {
    addNum() {
      this.$store.state.num += 1;
      sessionStorage.setItem("num", this.$store.state.num);
    },
    gotoSearch() {
      console.log("跳转搜索");
      this.$router.push({path: "/search"});
    },
    switchEmotionBox() {
      this.showEmotion = !this.showEmotion;
      const width = this.$refs.emotion.offsetWidth;
      const left = this.$elm.fixLeft(this.$refs.emotion);
      const top = this.$elm.fixTop(this.$refs.emotion);
      this.emoBoxPos.y = top;
      this.emoBoxPos.x = left + width / 2;
    },
    handleEmotion(emoText) {
      this.sendText += emoText;
      this.showEmotion = false;
    },
    gotoDy() {
      this.$router.push({path: "/subscribe"});
      // let message = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name: '/home/share/subscribe',
      //     url: `${this.$store.state.linkUrl}/subscribe?token=${this.$store.state.token}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
    },
    chooseTab(item, index) {
      this.active = index;
    },
    async getChannelList() {
      //  this.two='进入到channelList方法'
      // this.refreshLoading = true
      let data = {
        subscribe: 0,
      }
      channelList(data).then((res) => {
        this.channels = res.data
        var id = '-1'
        var index = this.channels.findIndex(item => item.routerId == id);
        this.active = index
        this.refreshLoading = false
      })
      // await this.$store.dispatch('share/getChannelLlist', data)
      // console.log('nnnnn', this.channels)
      // this.three=this.channels
      // let index = this.channels.findIndex(item => {return item.routerId == '-1'})


    },
    gotoPublish() {
      this.$router.push({path: "/publish", query: {commentType: 1}});
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    getInfoFromFlutter(info) {
      // 2、解析传过来的值
      let data = JSON.parse(info);
      if (data.action == "init" && data.param && data.param.token) {
        // 3、存储到store里
        this.token = data.param.token;
        this.$store.commit("SET_TOKEN", data.param.token);
        // this.two = `已经存入到store+${this.token}`
      } else {
        this.$toast.fail("token获取失败");
      }
    },
    handleSearch() {
      //去搜索
      this.$router.push({path: "/search"});
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))

    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;

  .publish {
    position: fixed;
    bottom: 50px;
    right: 10px;
    width: 55px;
    height: 55px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(242, 150, 0, 1);
    border-radius: 20px;

    img {
      width: 25px;
      height: 25px;
      opacity: 1;
    }
  }

  .header-container {
    .header {
      z-index: 999;
      background: rgba(242, 150, 0, 1);
      font-size: 15px;
      padding: 10px 10px;
      height: 32px;
      line-height: 32px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: sticky;
      top: 0;

      .search {
        width: 300px;
        margin-left: 11px;
      }

      img {
        width: 42px;
        height: 42px;
      }

      /deep/ .el-input .el-input__inner {
        border-radius: 15.5px;
      }
    }

    /deep/ .van-tabs__line {
      background: rgba(242, 150, 0, 1);
      width: 23px;
      height: 2px;
    }

    /deep/ .van-nav-bar__content {
      height: 48px;
      // 标题
      .van-nav-bar__title {
        // 不要默认设置最大宽度
        max-width: unset;
        font-size: 14px;
      }
    }

    /deep/ .van-tabs--line .van-tabs__wrap {
      height: 44px;
    }

    /deep/ .van-tab--active {
    }

    /deep/ .van-tab {
      font-size: 20px;
      font-weight: 500;
      color: rgba(56, 56, 56, 1);
    }

    // 汉堡按钮
    .wap-nav-wrap {
      position: fixed;
      right: 0;
      width: 40px;
      height: 48px;
      background-color: #fff;
      opacity: 0.9;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wap-nav-placeholder {
      width: 40px;
      // flex布局，给子元素定义宽度无效
      flex-shrink: 0;
    }
  }
}
</style>
